import 'package:date_format/date_format.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:table_calendar/table_calendar.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class VisitCalendarPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _VisitCalendarPageState();
}

class _VisitCalendarPageState extends State<VisitCalendarPage> {
  DateTime _selectedDay = DateTime.now();
  DateTime _focusDay = DateTime.now();
  String _monthInfo = formatDate(DateTime.now(), [yyyy, '年', mm, '月']);
  String _differInfo = '今天';

  _getDifferTodayInfo(DateTime day) {
    DateTime today = DateTime.now();
    Duration differTime = day.difference(DateTime.now());
    int diffDays = differTime.inDays;
    print('differDays=$diffDays');
    String differInfo = '今天';
    if (diffDays == 0) {
      if (day.day > today.day) {
        differInfo = '1天后';
      } else if (day.day < today.day) {
        differInfo = '1天前';
      } else
        differInfo = '今天';
    } else if (diffDays < 0) {
      differInfo = '${diffDays.abs()}天前';
    } else {
      differInfo = '${diffDays + 1}天后';
    }
    return differInfo;
  }

  _buildNoDataView() {
    return Container(
      padding: EdgeInsets.only(top: 15.w, bottom: 15.w),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Image(
            image: AssetImage('assets/images/ic_no_data.png'),
            width: 100.w,
            height: 100.w,
          ),
          Text(
            '制定的计划都完成了，非常棒哦～',
            style: TextStyle(fontSize: 12.sp, color: Color(0xff999999)),
          )
        ],
      ),
    );
  }

  _buildVisitView() {
    double width = MediaQuery.of(context).size.width;

    return ListView.separated(
        physics: NeverScrollableScrollPhysics(),
        shrinkWrap: true,
        itemCount: 5,
        separatorBuilder: (context, index) => Divider(),
        itemBuilder: (context, index) {
          return Container(
            padding: EdgeInsets.only(left: 10.w, right: 10.w),
            child: Column(
              children: [
                Row(
                  children: [
                    Image.asset(
                      'assets/images/ic_visit_footprint.png',
                      width: 20.w,
                      height: 20.w,
                    ),
                    SizedBox(
                      width: 5.w,
                    ),
                    Expanded(
                      child: Text(
                        '中联重科',
                        style: TextStyle(
                            color: Color(0xff333333),
                            fontSize: 15.sp,
                            fontWeight: FontWeight.bold),
                      ),
                    ),
                    Image.asset(
                      'assets/images/ic_clock_alarm.png',
                      width: 20.w,
                      height: 20.w,
                    ),
                  ],
                ),
                SizedBox(
                  height: 5.w,
                ),
                Container(
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(10.w)),
                    color: Color(0xfff6f6f6),
                  ),
                  constraints: BoxConstraints(
                    maxWidth: width - 100.w,
                  ),
                  child: Row(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      Image.asset(
                        'assets/images/ic_visit_client.png',
                        width: 20.w,
                        height: 20.w,
                      ),
                      Text(
                        '张三',
                        style: TextStyle(
                            color: Color(0xff999999), fontSize: 12.sp),
                      ),
                      SizedBox(
                        width: 5.w,
                      ),
                      Image.asset(
                        'assets/images/ic_location.png',
                        width: 20.w,
                        height: 20.w,
                      ),
                      Text(
                        '长沙·地址内容地址内容地址内容…',
                        style: TextStyle(
                            color: Color(0xff999999), fontSize: 12.sp),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          );
        });
  }

  @override
  Widget build(BuildContext context) {
    var now = DateTime.now();

    return Container(
      child: ListView(
        children: [
          Container(
            padding: EdgeInsets.all(12.w),
            child: Row(
              children: [
                Text(
                  _monthInfo,
                  style: TextStyle(
                      color: Colors.black,
                      fontSize: 16.sp,
                      fontWeight: FontWeight.bold),
                ),
                Spacer(),
                Text(
                  _differInfo,
                  style: TextStyle(
                    color: Color(0xff999999),
                    fontSize: 13.sp,
                  ),
                ),
              ],
            ),
          ),
          TableCalendar(
            locale: 'zh_CN',
            firstDay: now.add(Duration(days: -800)),
            lastDay: now.add(Duration(days: 800)),
            focusedDay: _focusDay,
            headerVisible: false,
            availableGestures: AvailableGestures.horizontalSwipe,
            daysOfWeekHeight: 20.w,
            daysOfWeekStyle: DaysOfWeekStyle(
              weekdayStyle:
                  TextStyle(color: Color(0xff999999), fontSize: 14.sp),
              weekendStyle:
                  TextStyle(color: Color(0xff999999), fontSize: 14.sp),
            ),
            rowHeight: 45.w,
            selectedDayPredicate: (day) {
              return isSameDay(_selectedDay, day);
            },
            onDaySelected: (selectedDay, focusedDay) {
              setState(() {
                _selectedDay = selectedDay;
                _focusDay = focusedDay;
                _differInfo = _getDifferTodayInfo(_selectedDay);
              });
            },
            onPageChanged: (focusDay) {
              print(formatDate(focusDay, [yyyy, '-', mm, '-', dd]));
              _focusDay = focusDay;
              //_monthInfo=formatDate(focusDay,[yyyy,'年',mm,'月']);
              // int days = DateUtils.getDaysInMonth(focusDay.year, focusDay.month);
              // int day = _selectedDay.day;
              // if (day > days) day = days;

              setState(() {
                _monthInfo = formatDate(focusDay, [yyyy, '年', mm, '月']);
                int days =
                    DateUtils.getDaysInMonth(focusDay.year, focusDay.month);
                int day = _selectedDay.day;
                if (day > days) day = days;
                _selectedDay = DateTime(focusDay.year, focusDay.month, day);
                _differInfo = _getDifferTodayInfo(_selectedDay);
              });
            },
            calendarBuilders: CalendarBuilders(
              defaultBuilder: (context, day, focusDay) {
                return Container(
                  alignment: Alignment.center,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        '${day.day}',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Color(0xff333333), fontSize: 15.sp),
                      ),
                      Visibility(
                        visible: day.hashCode % 2 == 0,
                        child: Text(
                          '2次',
                          style: TextStyle(
                              color: Color(0xff009669), fontSize: 10.sp),
                        ),
                      ),
                    ],
                  ),
                );
              },
              todayBuilder: (context, day, focusDay) {
                return Container(
                  margin: EdgeInsets.all(5.w),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(4.w)),
                    color: Color(0xff009669),
                  ),
                  alignment: Alignment.center,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        '${day.day}',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Color(0xffffffff), fontSize: 15.sp),
                      ),
                      Visibility(
                        visible: day.hashCode % 2 == 0,
                        child: Text(
                          '2次',
                          style: TextStyle(
                              color: Color(0xffffffff), fontSize: 11.sp),
                        ),
                      ),
                    ],
                  ),
                );
              },
              outsideBuilder: (context, day, focusDay) {
                return Container(
                  alignment: Alignment.center,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        '${day.day}',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Color(0xff999999), fontSize: 15.sp),
                      ),
                      Visibility(
                        visible: day.hashCode % 2 == 0,
                        child: Text(
                          '2次',
                          style: TextStyle(
                              color: Color(0xff009669), fontSize: 10.sp),
                        ),
                      ),
                    ],
                  ),
                );
              },
              selectedBuilder: (context, day, focusDay) {
                return Container(
                  margin: EdgeInsets.all(5.w),
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.all(Radius.circular(4.w)),
                    color: Color(0xffdddddd),
                  ),
                  alignment: Alignment.center,
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        '${day.day}',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                            color: Color(0xff333333), fontSize: 15.sp),
                      ),
                      Visibility(
                        visible: day.hashCode % 2 == 0,
                        child: Text(
                          '2次',
                          style: TextStyle(
                              color: Color(0xff009669), fontSize: 11.sp),
                        ),
                      ),
                    ],
                  ),
                );
              },
            ),
          ),
          Container(
            margin: EdgeInsets.all(10.w),
            decoration: BoxDecoration(
              border: Border.all(color: Color(0xfff0f0f0)),
              borderRadius: BorderRadius.all(Radius.circular(8.w)),
              color: Colors.white,
            ),
            padding: EdgeInsets.all(10.w),
            child: Column(
              children: [
                Row(
                  children: [
                    Container(
                      height: 12.w,
                      width: 2.w,
                      decoration: BoxDecoration(
                        color: Color(0xff009869),
                        borderRadius: BorderRadius.all(Radius.circular(1.w)),
                      ),
                    ),
                    SizedBox(
                      width: 5.w,
                    ),
                    Text(
                      '走访计划',
                      style:
                          TextStyle(color: Color(0xff333333), fontSize: 15.sp),
                    ),
                  ],
                ),
                Divider(),
                //_buildNoDataView(),
                _buildVisitView(),
              ],
            ),
          ),
        ],
      ),
    );
  }
}
